<template>
	<view class="vip-pay-page">
		<!-- 价格展示区域 -->
		<view class="price-section">
			<view class="price-amount">¥{{dataInfo.payTotal || '0'}}</view>
			<view class="price-desc">{{dataInfo.planName || ''}}</view>
		</view>

		<!-- 优惠信息 -->
		<!-- <view class="benefit-section">
			<view class="benefit-item">
				<view class="benefit-label">抖音优惠券</view>
				<view class="benefit-value">无可用优惠券 ></view>
			</view>
		</view> -->
		<!-- 积分模块 -->
		<view class="points-section" @click="togglePointsUsage">
			<view class="section-content">
				<text class="section-title">积分</text>
				<text class="points-balance">余额: {{ userPoints }}</text>
			</view>
			<view class="points-checkbox">
				<view class="checkbox-btn" :class="{ active: usePoints }">
					<wd-icon v-if="usePoints" name="check" size="12px" color="#fff"></wd-icon>
				</view>
			</view>
		</view>

		<!-- 支付方式选择 -->
		<view class="payment-methods">
			<view 
				v-for="method in paymentMethods" 
				:key="method.id" 
				class="payment-method"
				@click="selectPaymentMethod(method)"
			>
				<view class="method-info">
					<image :src="method.icon" class="method-icon"></image>
					<text class="method-name">{{ method.name }}</text>
				</view>
				<view class="method-radio">
					<view class="radio-btn" :class="{ active: selectedPaymentMethod?.id === method.id }">
						<wd-icon v-if="selectedPaymentMethod?.id === method.id" name="check" size="12px" color="#fff"></wd-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部支付按钮 -->
		<view class="bottom-bar">
			<wd-button 
				custom-class="pay-button" 
				@click="handlePayment"
				:disabled="!selectedPaymentMethod"
				:loading="loading"
			>
				立即支付 ¥ {{ dataInfo.payTotal || '0'}}
			</wd-button>
		</view>
	</view>
	<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
</template>

<script setup>

	// 响应式数据
	const selectedPaymentMethod = ref({
		id: 1,
		name: '微信支付',
		icon: '/pagesA/static/wxpay.png'
	})

	// 支付方式列表
	const paymentMethods = ref([
		{
			id: 1,
			name: '微信支付',
			icon: '/pagesA/static/wxpay.png'
		}
	])
	const paramObj = ref({});
	// 积分相关数据
	const userPoints = ref(0) // 用户积分余额
	const usePoints = ref(false) // 是否使用积分
	const loadActive = ref(false) // 是否使用积分
	const dataInfo = ref({}) // 是否使用积分
	const loading = ref(false) // 是否使用积分

	// 选择支付方式
	const selectPaymentMethod = (method) => {
		selectedPaymentMethod.value = method
	}

	// 切换积分使用状态
	const togglePointsUsage = async () => {
		usePoints.value = !usePoints.value;
		if(usePoints.value){
			const res = await uni.api.vipConfirm({
				quantity:1,
				venueId:paramObj.value.venueId,
				signFlowId:paramObj.value.signFlowId,
				planType:paramObj.value.planType,
				vipType:5,
				payType:3,
			});
			if(res.code==0){
				dataInfo.value = res.data;
			}
		}else{
			const res = await uni.api.vipConfirm({
				quantity:1,
				venueId:paramObj.value.venueId,
				signFlowId:paramObj.value.signFlowId,
				planType:paramObj.value.planType,
				vipType:5,
				payType:1,
			});
			if(res.code==0){
				dataInfo.value = res.data;
			}
		}
	}

	// 处理支付
	// 处理支付
	const handlePayment = async () => {
		loading.value = true
		// 1=现金支付；3=积分支付；4=现金&积分支付；
		const totalAmount = dataInfo.value.payTotal;
		let payType = 1;
		let payCash = totalAmount;
		if(usePoints.value && userPoints.value>=totalAmount){//如果选了 且 积分大于或等总金额
			payType = 3;
		}else if(usePoints.value && userPoints.value>0 && userPoints.value<totalAmount){//如果选了 且 积分大于0 且 积分小于总金额
			payType = 4;
			// 保留两位小数且四舍五入
			payCash = (totalAmount - userPoints.value).toFixed(2);
		}else{//如果未选择积分支付，或者用户积分不足
			payType = 1;
		}
		const res = await uni.api.vipCreate({
			payWay:'wx_lite',
			payType:payType,
			vipType:5,
			quantity:1,
			totalPrice:dataInfo.value.payTotal,
			...paramObj.value
		});
		if(res.code==0){
			if(payType==3){//积分支付 不支付
				uni.showToast({
					title: '支付成功',
					icon: 'none'
				})
				setTimeout(()=>{
					uni.switchTab({
						url: `/pages/vip/index`
					})
				},300)
				return
			}
			const changeInfo = JSON.parse(res.data.changeInfo);
			uni.pingpp.createPayment(changeInfo, function(result, err) {
				if (result == "success") {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.switchTab({
							url: `/pages/vip/index`
						})
					},300)
				}
				uni.hideLoading()
			});
		}else{
			uni.hideLoading()
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		}
		loading.value = false
	}
	//获取积分
	const myIntegral = async () => {
		const res = await uni.api.myIntegral();
		if(res.code==0){
			userPoints.value = res.data?.surplusIntegral || 0;
		}
	}
	//获取详情
	const myConfirm= async () => {
		loadActive.value = true;
		const res = await uni.api.vipConfirm({
			quantity:1,
			venueId:paramObj.value.venueId,
			signFlowId:paramObj.value.signFlowId,
			planType:paramObj.value.planType,
			vipType:5
		});
		loadActive.value = false;
		if(res.code==0){
			dataInfo.value = res.data;
		}
	}
	onLoad((opt) => {
		myIntegral();
		const param = JSON.parse(opt.params);
		paramObj.value = param;
		myConfirm();
	})
</script>

<style scoped lang="scss">
	.vip-pay-page {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 120rpx;
	}


	/* 价格展示区域 */
	.price-section {
		background: #fff;
		padding: 80rpx 32rpx 60rpx;
		text-align: center;
		margin-bottom: 20rpx;

		.price-amount {
			font-size: 96rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 16rpx;
		}

		.price-desc {
			font-size: 28rpx;
			color: #666;
		}
	}

	/* 优惠信息 */
	.benefit-section {
		background: #fff;
		margin-bottom: 20rpx;

		.benefit-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.benefit-label {
				font-size: 28rpx;
				color: #333;
			}

			.benefit-value {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	/* 积分模块 */
	.points-section {
		background: #fff;
		padding: 32rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.section-content {
			display: flex;
			align-items: center;

			.section-title {
				font-size: 28rpx;
				color: #333;
			}

			.points-balance {
				font-size: 24rpx;
				color: #666;
				margin-left: 16rpx;
			}
		}

		.points-checkbox {
			.checkbox-btn {
				width: 38rpx;
				height: 38rpx;
				border: 2px solid #ddd;
				border-radius: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;

				&.active {
					background: #000000;
					border-color: #000000;
				}
			}
		}
	}

	/* 支付方式 */
	.payment-methods {
		background: #fff;
		margin-bottom: 20rpx;

		.payment-method {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.method-info {
				display: flex;
				align-items: center;

				.method-icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
				}

				.method-name {
					font-size: 28rpx;
					color: #333;
				}
			}

			.method-radio {
				.radio-btn {
					width: 40rpx;
					height: 40rpx;
					border: 2px solid #ddd;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s ease;

					&.active {
						background: #07c160;
						border-color: #07c160;
					}
				}
			}
		}
	}

	/* 底部支付按钮 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 24rpx 32rpx;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
		z-index: 999;
		box-sizing: border-box;
	}

	:deep(.pay-button) {
		width: 100% !important;
		height: 88rpx !important;
		background: #333 !important;
		border-radius: 44rpx !important;
		font-size: 32rpx !important;
		font-weight: 500 !important;
	}
</style>